<template>
  <div class="register">
    <div class="register-container">
      <h1>注册</h1>
      <form ref="formRef" @submit.prevent="handleSubmit">
        <div class="form-group">
          <input
            type="text"
            required
            placeholder="输入你的昵称"
            v-model="form.username"
          >
          <span>{{errors.username.length > 0 ? errors.username[0] : null }}</span>
        </div>
        <div class="form-group">
          <input
            type="email"
            required
            placeholder="输入你的邮箱"
            v-model="form.email"
          >
          <span>{{errors.email.length > 0 ? errors.email[0] : null }}</span>
        </div>
        <div class="form-group">
          <input
            type="password"
            required
            placeholder="输入你的密码"
            v-model="form.password"
          >
          <span>{{errors.password.length > 0 ? errors.password[0] : null }}</span>
        </div>
        <router-link to="/login">已有帐号？去登陆</router-link>
        <button>登录</button>
      </form>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { postRegister, registerForm } from 'src/services/auth'
  export default defineComponent({
    setup () {

      const formRef = ref<HTMLFormElement | null>(null)

      const form = reactive<registerForm>({
        username: '',
        email: '',
        password: ''
      })
      const errors = reactive<Record<string,string[]>>({
        username: [],
        email: [],
        password: []
      })
      const router = useRouter()
      const handleSubmit = async () => {
        const result = await postRegister(form)
        if (result.msg === 'success') {
          router.push("/login")
        } else {
          errors.username = result.errors?.username || []
          errors.email = result.errors?.email || []
          errors.password = result.errors?.password || []
        }
      }

      return {
        formRef,
        form,
        handleSubmit,
        errors
      }
    }
  })
</script>

<style lang="scss" scoped>
  .register {
    height: calc(100vh - 110px);
  }
  .register-container {
    max-width: 400px;
    margin: 0 auto;
  }
  h1 {
    margin-bottom: 32px;
    text-align: center;
  }
  input {
    display: block;
    height: 42px;
    width: 100%;
    // margin-bottom: 25px;
    padding-left: 1em;
    border: 1px solid #003371;
    outline: none;
    border-radius: 5px;
  }
  input:focus {
    border-color: #424C50;
  }
  input::placeholder {
    font-size: 14px;
    color: rgba($color: #758A99, $alpha: .9);
  }
  a {
    font-size: 14px;
    color: #2E4D7E;
  }
  button {
    display: block;
    width: 100%;
    height: 36px;
    margin-top: 5px;
    outline: none;
    border: 1px solid #003371;
    background-color: transparent;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
  }
  .form-group {
    position: relative;
    margin-bottom: 25px;
    span {
      position: absolute;
      height: 16px;
      bottom: -18px;
      font-size: 14px;
      color: crimson;
    }
  }
</style>